<template>
    <div v-if="orderData" class="order-wrap">
        <van-nav-bar title="确认订单" left-arrow fixed @click-left="onClickLeft" />

        <div class="address-top-box">
            <!-- 无收货地址 -->
            <div v-if="isLoaded && !(orderData && orderData.address && orderData.address.address)"
                @click="handleToSelectAddress" class="no-address-box">
                <div class="address-default-text">请选择收货地址</div>
                <img class="address-arrow-icon" :src="addressArrowIcon" alt="">

                <img class="address-border-bottom" :src="addressBorderBg" alt="">
            </div>

            <!-- 有收货地址 -->
            <div v-if="isLoaded && (orderData && orderData.address && orderData.address.address)" class="default-box"
                @click="handleToSelectAddress">
                <img class="address-lation" :src="addressLationIcon" alt="">
                <div class="address-content">
                    <div class="address-content-name">
                        <div class="address-user-name">{{ orderData.address.contact.split(' ')[0] }}</div>
                        <div class="address-user-tel">{{ orderData.address.contact.split(' ')[1] }}</div>
                    </div>
                    <div class="address-content-info">{{ orderData.address.address }}</div>
                </div>
                <img class="address-arrow-icon" :src="addressArrowIcon" alt="">
                <img class="address-border-bottom" :src="addressBorderBg" alt="">
            </div>
        </div>


        <!-- 中部 -->
        <div v-for="(item, index) in orderData.items" :key="index" class="good-shop-box">
            <div class="shop-top">
                <img class="shop-top-icon" :src="orderShopIcon" alt="">
                <div class="shop-top-title">{{ item.shop_name }}</div>
            </div>
            <div v-for="(gItem, gIndex) in item.items" :key="gIndex" class="good-item">
                <img class="good-item-img" :src="gItem.left_icon" alt="">
                <div class="good-item-content">
                    <div class="good-item-content-name">{{ gItem.title }}</div>
                    <div class="good-item-content-sku">{{ gItem.sku_text }}</div>
                    <!-- <div class="good-info-subsidy" v-if="gItem.labels.length">
                        <div class="good-info-subsidy-btn" :style="{  color: items.color }"
                            v-for="items, indexs in gItem.labels" :key="indexs">
                           {{ items.name }}
                        </div>
                    </div> -->
                    <div class="good-item-price">{{ gItem.price_text }}</div>
                </div>

                <div class="good-num-fix">x{{ gItem.quantity }}</div>
            </div>

            <!-- 备注 -->
            <div class="good-remark">
                <van-field v-model="item.user_note" rows="1" autosize label="商品备注" type="textarea"
                    placeholder="选填：填写留言" />
            </div>

            <div class="good-total">
                <div class="good-total-num">{{ item.summary_text }}，小计：</div>
                <div class="good-total-price">{{ item.summary_price_text }}</div>
            </div>

        </div>

        <div class="youhui_title" @click="getCoupon" v-if="orderData.coupon_items.length > 0">
            <van-cell title="现金消费券" :value="coupon_deduction" is-link error>
                <template #icon>
                    <img class="youhui_icon" src="../../images/mine/youhui_icon.png" />
                </template>
            </van-cell>
        </div>
        <!--  @click="getCoupon" v-if="orderData.coupon_items.length>0"-->
        <div class="youhui_title" v-if="orderData.consume_gold > 0">
            <van-cell title="消费金" :value="'当前余额' + orderData.consume_gold" error
                :style="{ border: checked ? '.01rem solid rgba(243,42,35,0.6)' : '.01rem solid #fff', }">
                <template #icon>
                    <img class="youhui_icon" src="../../images/mine/youhui_icon.png" />
                </template>
                <template #right-icon>
                    <van-checkbox style="margin-left: .2rem;" v-model="checked" icon-size=".3rem"
                        checked-color="#60c60f" @change="handleChange"></van-checkbox>
                </template>
            </van-cell>
        </div>
        <!-- 底部 -->
        <div class="action-bottom">
            <div class="action-price">
                <div class="action-price-val">{{ orderData.summary_price || '￥0.00' }}</div>
                <div v-if="orderData.summary_subsidy2" class="action-price-subsity">佣金补贴：<span
                        class="action-price-subsity-red">{{ orderData.summary_subsidy2|| '￥0.00' }}</span></div>
                <div v-if="orderData.summary_subsidy" class="action-price-subsity">补贴金额：<span
                        class="action-price-subsity-red">{{ orderData.summary_subsidy|| '￥0.00' }}</span></div>
            </div>
            <div @click="handleToSave" class="action-btn active-btn">提交订单</div>
        </div>
    </div>
</template>

<script>
import { addressArrowIcon, addressBorderBg, addressLationIcon, orderShopIcon } from '@/tool/static-img';
import { ADDRESS_DEFAULT, ORDER_CONFIRM, ORDER_SUBMIT } from '@/api/home';
export default {
    data() {
        return {
            addressArrowIcon, addressBorderBg, addressLationIcon,
            orderShopIcon,
            defaultAddress: null,
            orderData: null,
            isLoaded: false,
            btnLoad: false,
            coupon_deduction: "",
            amt: '444',
            checked: false
        }
    },
    async created() {
        const hasSelectAddress = localStorage.getItem('hasSelectAddress');
        if (hasSelectAddress) {
            this.isLoaded = true;
            this.defaultAddress = JSON.parse(hasSelectAddress);
        }
        // console.log(this.$route.query.coupon_id);
        // if(){
        //     this.youhui=
        // }
        localStorage.removeItem('coupon_items')
        // 确认订单
        this.confirmOrder(this.$route.query.coupon_id);
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        // 选择地址
        handleToSelectAddress() {
            this.$router.push({
                name: 'address'
            })
        },
        handleChange(){
            this.confirmOrder(this.$route.query.coupon_id);
        },
        // 确认订单
        confirmOrder(coupon_id) {
            const orderItem = JSON.parse(localStorage.getItem('orderItem'));
            let params = {};
            params['address_id'] = !this.defaultAddress ? null : this.defaultAddress.id;
            if (!orderItem.from_cart) {
                params['from_cart'] = 0;
                params['goods_id'] = orderItem.goods_id;
                params['spec_id'] = orderItem.spec_id;
                params['quantity'] = orderItem.quantity;
                params['coupon_id'] = Number(coupon_id);
                params['use_consume_gold'] = this.checked ? 1 : 0
            } else {
                params['from_cart'] = 1;
                params['coupon_id'] = Number(coupon_id)
                params['use_consume_gold'] = this.checked ? 1 : 0

            }


            this.$http.post(ORDER_CONFIRM, params)
                .then(res => {
                    const {
                        data
                    } = res;

                    this.orderData = data;
                    this.coupon_deduction = data.coupon_deduction

                    localStorage.setItem('coupon_items', JSON.stringify(data.coupon_items));
                    if (coupon_id) {
                        // this.orderData.summary_price=this.orderData.summary_price-this.youhui
                    }
                })
                .finally(() => {
                    this.isLoaded = true;
                })
        },
        // 优惠券
        getCoupon() {
            this.$router.replace({
                path: '/coupon',
                query: {
                    coupon_id: this.$route.query.coupon_id,
                    goods: 1
                }
            })
        },
        // 订单
        handleToSave() {
            if (!this.orderData.address.address) {
                this.$toast('请先选择地址')
                return
            }

            const orderItem = JSON.parse(localStorage.getItem('orderItem'));

            let params = {};
            params['address_id'] = this.orderData.address.id;
            if (!orderItem.from_cart) {
                params['from_cart'] = 0;
                params['goods_id'] = orderItem.goods_id;
                params['spec_id'] = orderItem.spec_id;
                params['quantity'] = orderItem.quantity;
                params['coupon_id'] = Number(this.$route.query.coupon_id)
                params['use_consume_gold'] = this.checked ? 1 : 0

            } else {
                params['from_cart'] = 1;
                params['coupon_id'] = Number(this.$route.query.coupon_id)
                params['use_consume_gold'] = this.checked ? 1 : 0
            }

            params['notes'] = this.orderData.items.map(item => {
                return {
                    shop_id: item.shop_id,
                    user_note: item.user_note
                }
            })

            if (this.btnLoad) {
                return
            }
            this.btnLoad = true;
            this.$http.post(ORDER_SUBMIT, params)
                .then((res) => {
                    localStorage.removeItem('hasSelectAddress');
                    localStorage.removeItem('orderItem');
                    // 截止时间
                    res.data.expired_time = new Date().getTime() + res.data.expired_seconds * 1000;
                    localStorage.setItem('cashOrder', JSON.stringify(res.data))

                    // 去收银台
                    this.$router.replace({
                        name: 'cashier'
                    })
                })
                .catch(() => {
                    // this.isLoaded = false;
                })

        }
    }
}

</script>
<style lang="scss" scoped>
.order-wrap {
    position: relative;
    min-height: 100vh;
    padding-top: 46px;
    background-color: #f4f4f4;
    padding-bottom: calc(1.2rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    box-sizing: border-box;

   ::v-deep .van-nav-bar .van-icon {
        color: #333333;
    }

   ::v-deep .van-nav-bar__arrow {
        font-size: 20px;
    }

    ::v-deep .van-hairline--bottom::after {
        display: none;
    }

    .action-bottom {
        display: flex;
        justify-content: space-between;
        position: fixed;
        bottom: 0;
        left: 0;
        height: 1.08rem;
        width: 100%;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        background: #ffffff;

        .action-price {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 0.32rem;

            .action-price-val {
                height: 0.56rem;
                margin-bottom: 0.04rem;
                line-height: 0.56rem;
                font-size: 0.4rem;
                font-weight: 500;
                color: #F32A23;
                // &::before{
                //     content: '¥';
                //     font-size: 0.24rem;
                // }
            }

            .action-price-subsity {
                height: 0.34rem;
                line-height: 0.34rem;
                font-size: 0.24rem;
                font-weight: 400;
                color: #333333;

                .action-price-subsity-red {
                    color: #F32A23;
                }
            }
        }

        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.04rem;
            height: 0.8rem;
            margin-top: 0.14rem;
            margin-right: 0.32rem;
            font-size: 0.28rem;
            font-weight: 500;
            color: #ffffff;

            border-radius: 0.4rem;
            background: linear-gradient(135deg, #FF5851 0%, #E9011B 100%);
        }
    }

    .address-top-box {
        min-height: 1.76rem;
        width: 100%;
        background: #ffffff;
    }

    .no-address-box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 1.76rem;
        margin-bottom: 0.16rem;
        background-color: #ffffff;

        .address-border-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.04rem;
        }

        .address-default-text {
            height: 0.44rem;
            margin-left: 0.32rem;
            line-height: 0.44rem;
            font-weight: 500;
            font-size: 0.32rem;
            color: #333333;
        }

        .address-arrow-icon {
            width: 0.32rem;
            height: 0.32rem;
            margin-right: 0.32rem;
        }
    }

    .default-box {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0.4rem 0.32rem;
        box-sizing: border-box;
        background: #ffffff;

        .address-border-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 0.04rem;
        }

        .address-lation {
            width: 0.4rem;
            height: 0.4rem;
            margin-right: 0.24rem;
        }

        .address-arrow-icon {
            width: 0.32rem;
            height: 0.32rem;
            margin-right: 0.32rem;
        }

        .address-content {
            flex-shrink: 0;
            width: 5.5rem;
            margin-right: 0.4rem;

            .address-content-name {
                display: flex;
                align-items: center;
                margin-bottom: 0.12rem;

                .address-user-name {
                    height: 0.44rem;
                    margin-right: 0.16rem;
                    line-height: 0.44rem;
                    font-weight: 500;
                    font-size: 0.32rem;
                    color: #333333;
                }

                .address-user-tel {
                    font-size: 0.28rem;
                    font-weight: 400;
                    color: #999999;
                }
            }

            .address-content-info {
                line-height: 0.4rem;
                font-size: 0.28rem;
                font-weight: 400;
                color: #999999;
            }
        }
    }

    .good-shop-box {
        padding: 0.32rem;
        margin-bottom: 0.16rem;
        background: #ffffff;

        .shop-top {
            display: flex;
            align-items: center;
            margin-bottom: 0.24rem;

            .shop-top-icon {
                width: 0.4rem;
                height: 0.4rem;
                margin-right: 0.16rem;
            }

            .shop-top-title {
                font-weight: 500;
                font-size: 0.28rem;
                color: #333333;
            }
        }

        .good-item {
            position: relative;
            display: flex;
            margin-bottom: 0.42rem;

            .good-num-fix {
                position: absolute;
                right: 0;
                bottom: 0;
                font-weight: 400;
                font-size: 0.26rem;
                color: #999999;
            }

            .good-item-img {
                width: 1.8rem;
                height: 1.8rem;
                border-radius: 0.16rem;
            }

            .good-item-content {
                width: 4.5rem;
                height: 0.4rem;
                margin-left: 0.24rem;

                .good-item-content-name {
                    margin-bottom: 0.04rem;
                    line-height: 0.4rem;
                    font-weight: 500;
                    font-size: 0.28rem;
                    color: #333333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                .good-item-content-sku {
                    height: 0.34rem;
                    margin-bottom: 0.12rem;
                    line-height: 0.34rem;
                    font-weight: 400;
                    font-size: 0.24rem;
                    color: #999999;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                .good-info-subsidy {
                    // display: flex;
                    // height: 0.36rem;
                    margin-top: 0.08rem;

                    .good-info-subsidy-btn {
                        background: transparent;
                        // width: 45%;
                        display: flex;
                        margin-right: .3rem;
                        color: #F32A23;
                        // opacity: 0.07;
                        background-size: cover;
                        align-items: center;
                        // justify-content: center;
                        height: 0.36rem;
                        // padding: 0 0.12rem;
                        font-weight: 400;
                        font-size: 0.22rem;
                        border-radius: 0.06rem;
                        // text-indent: .1rem;
                        box-sizing: border-box;
                    }

                    .hd_bt {
                        // background: #fdf4ee;
                        color: #FF6200;
                        margin-bottom: .05rem;
                    }
                }

                .good-item-price {
                    height: 0.44rem;
                    line-height: 0.44rem;
                    font-size: 0.32rem;
                    font-weight: 500;
                    margin-bottom: 0.15rem;
                    margin-top: .1rem;
                    color: #F32A23;
                }
            }
        }
    }

    .good-remark {
        border-radius: 0.16rem;
        overflow: hidden;
        background: #F4F4F4;

        .van-cell {

            background: #f4f4f4;

            .van-field__label {
                width: 1.36rem;
                margin-right: 0;
                color: #333333;
            }
        }
    }

    .good-total {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        line-height: 0.5rem;
        margin-top: 0.32rem;

        .good-total-num {
            font-size: 0.24rem;
            color: #999999;
        }

        .good-total-price {
            font-weight: 500;
            font-size: 0.36rem;
            color: #F32A23;
        }
    }


}

.youhui_title {
    margin: .2rem;

    .van-cell {
        border-radius: .1rem;
        border: .01rem solid #ffffff;
    }

    .van-cell__value {
        color: #F32A23;
    }

    .youhui_icon {
        width: .6rem;
        vertical-align: middle;
        margin-top: -.1rem;
        margin-right: .2rem;
    }
}
</style>